$(function () {
    $.ajax({
        method: "get",
        url: "/api/catalog/index",
        success: function (res) {
            console.log(res.data)
            const html_Str = template('goods_name', res.data)
            $('.nav').html(html_Str)
            const html_title = template("goods_title", res.data)
            $('.pic').html(html_title)
            const html_titleName = template('goods_titleName', res.data)
            $('.hd').html(html_titleName)

            load()
        }
    })

    $('.nav').on("click", ".item", function () {
        const index = $(this).attr("index")
        $('.pic').children().eq(index).show().siblings().hide()
        $(this).addClass('active').siblings().removeClass('active')
        $(".hd").children(".txt_name").eq(index).show().siblings(".txt_name").hide()
        $('.bd img').hide().fadeIn(500)
        const id = $(this).attr("id")
        $.ajax({
            method: "get",
            url: "/api/catalog/current/",
            data: {
                id
            },
            success: function (res) {
                const goods_item_pic = template('goods_item_pic', res.data.currentCategory)
                $('.bd').html(goods_item_pic)
            }
        })
    })

    $(".bd").on("click", ".item", function () {
        const id = $(this).attr("id")
        console.log(id);
        $.ajax({
            method: "get",
            url: "/api/goods/list?categoryId=id" + id,

            success: function (res) {
                console.log(res.data);
            }
        })
    })
    function load() {
        $('.pic').children().eq(1).show().siblings().hide()
        $('.nav').children().eq(0).click()
        $(".hd").children(".txt_name").eq(0).show()
        $('.bd').show()
    }
})